<template id="dashboard-template">
  <div class="dashboard-container">
    <div class="dashboard-header">
      <div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
        <dv-decoration-8 :reverse="true" style="width:500px;height:50px;margin-right: 180px;"/>
        <dv-decoration-11 style="width:350px;height:60px;">
          <h1 class="dashboard-title">车间生产看板</h1>
        </dv-decoration-11>
        <dv-decoration-8 style="width:500px;height:50px;margin-left: 180px;"/>
      </div>
    </div>

    <div class="dashboard-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 工单统计 -->
        <div class="panel" style="height: 25%;">
          <div class="panel-header">
            <div class="panel-title">工单统计(周)</div>
          </div>
          <div class="panel-content">
            <div class="temp-humidity-enhanced">
              <div class="temp-humidity-content">
                <div class="temp-item-enhanced">
                  <div class="temp-data">
                    <div class="temp-value">{{ orderStats.total }}</div>
                    <div class="temp-label">工单任务数</div>
                  </div>
                </div>
                <div class="humidity-item-enhanced">
                  <div class="humidity-data">
                    <div class="humidity-value">{{ orderStats.completionRate }}%</div>
                    <div class="humidity-label">工单完成率</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 当前车间温湿度 -->
        <div class="panel" style="height: 30%;">
          <div class="panel-header">
            <div class="panel-title">当前车间温湿度</div>
          </div>
          <div class="panel-content">
            <div class="temp-humidity-enhanced">
              <div class="temp-humidity-content">
                <div class="temp-item-enhanced">
                  <div class="temp-icon-wrapper">
                    <img src="/image/wendu.png" alt="温度" class="temp-icon"/>
                  </div>
                  <div class="temp-data">
                    <div class="temp-value">{{ environment.temperature }}℃</div>
                    <div class="temp-label">温度</div>
                  </div>
                </div>
                <div class="humidity-item-enhanced">
                  <div class="humidity-icon-wrapper">
                    <img src="/image/shidu.png" alt="湿度" class="humidity-icon"/>
                  </div>
                  <div class="humidity-data">
                    <div class="humidity-value">{{ environment.humidity }}%</div>
                    <div class="humidity-label">湿度</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 每日合格率 -->
        <div class="panel" style="height: 40%;">
          <div class="panel-header">
            <div class="panel-title">每日合格率</div>
          </div>
          <div class="panel-content">
            <div id="quality-rate-chart" class="chart-container"></div>
          </div>
        </div>
      </div>

      <!-- 中间面板 -->
      <div class="center-panel">
        <!-- 工单生产统计 -->
        <div class="panel" style="height: 100%;">
          <div class="panel-header">
            <div class="panel-title">工单生产统计</div>
          </div>
          <div class="panel-content">
            <div class="production-stats">
              <!-- 顶部统计数据 -->
              <div class="stats-header">
                <div class="stats-left">
                  <div class="stat-item">
                    <div class="stat-value colorC">{{ orderStats.total }}</div>
                    <div class="stat-label">未完成工单总计</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ orderStats.issue }}</div>
                    <div class="stat-label">已下发工单</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value colorC">{{ orderStats.production }}</div>
                    <div class="stat-label">生产中工单</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ orderStats.interrupt }}</div>
                    <div class="stat-label">已中断工单</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value colorC">{{ orderStats.pause }}</div>
                    <div class="stat-label">暂停工单</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ orderStats.none }}</div>
                    <div class="stat-label">无工单</div>
                  </div>
                </div>
                <div class="stats-right">
                  <div class="equipment-status-list">
                    <div class="equipment-status-item">
                      <div class="status-dot status-running"></div>
                      <div class="status-info">
                        <div class="status-name">运行</div>
                        <div class="status-count">12</div>
                      </div>
                    </div>
                    <div class="equipment-status-item">
                      <div class="status-dot status-standby"></div>
                      <div class="status-info">
                        <div class="status-name">待机</div>
                        <div class="status-count">10</div>
                      </div>
                    </div>
                    <div class="equipment-status-item">
                      <div class="status-dot status-stopped"></div>
                      <div class="status-info">
                        <div class="status-name">停机</div>
                        <div class="status-count">30</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="equipment-list">
                <div v-for="(equipment, index) in equipmentList.slice(0, 6)" :key="index" class="equipment-item">
                  <div class="equipment-content">
                    <div class="equipment-top">
                      <div class="equipment-name">{{ equipment.name }}</div>
                      <div class="equipment-status">
                        <span class="state-label">状态：</span>
                        <span class="state-value" :data-state="equipment.state || '运行'">{{
                            equipment.state || '运行'
                          }}</span>
                      </div>
                    </div>
                    <div class="equipment-middle">
                      <div class="equipment-info">
                        <div class="equipment-details">
                          <div>剩余{{ equipment.ordersLeft }}条工单</div>
                          <div>工单: {{ equipment.orderNo }}</div>
                          <div>产品: {{ equipment.product }}</div>
                          <div>预计完工: {{ equipment.finishTime }}</div>
                        </div>
                      </div>
                      <div class="equipment-progress">
                        <div :id="'gauge-chart-' + index" class="gauge-chart"></div>
                        <!-- <div class="gauge-text">{{ Math.round(equipment.progress * 10) }}</div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <!-- 安全生产天数 -->
        <div class="panel" style="height: 20%;">
          <div class="panel-header">
            <div class="panel-title">安全生产天数</div>
          </div>
          <div class="panel-content">
            <div class="safety-days">
              <dv-digital-flop :config="safetyDaysConfig" style="width:200px;height:50px;"/>
            </div>
          </div>
        </div>

        <!-- 设备故障TOP5 -->
        <div class="panel" style="height: 40%;">
          <div class="panel-header">
            <div class="panel-title">设备故障TOP5</div>
          </div>
          <div class="panel-content">
            <div id="fault-ranking-chart" class="chart-container"></div>
          </div>
        </div>

        <!-- 报工记录 -->
        <div class="panel" style="height: 40%;">
          <div class="panel-header">
            <div class="panel-title">报工记录</div>
          </div>
          <div class="panel-content">
            <dv-scroll-board :config="workRecordConfig" style="width:100%;height:100%"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "WorkshopDashboard",
  data() {
    return {
      // 工单统计数据
      orderStats: {
        total: 35,
        completionRate: 86,
        issue: 8,
        production: 12,
        interrupt: 3,
        pause: 5,
        none: 7
      },
      // 设备状态数据
      equipmentStatus: {
        running: 12,
        standby: 10,
        stopped: 30
      },
      // 环境数据
      environment: {
        temperature: 26,
        humidity: 82
      },
      // 安全生产天数
      safetyDays: 365,
      // 安全生产天数配置
      safetyDaysConfig: {
        number: [365],
        content: '{nt}',
        textAlign: 'center',
        style: {
          fontSize: 48,
          fill: '#00d4ff',
          fontWeight: 'bold'
        }
      },
      // 设备列表
      equipmentList: [
        {
          name: '冲压A13冲床',
          ordersLeft: 1,
          orderNo: '1100084952001',
          product: '3100000002880',
          finishTime: '2025-11-13 00:29:51',
          progress: 75,
          state: '运行'
        },
        {
          name: '冲压B07冲床',
          ordersLeft: 3,
          orderNo: '1100084952002',
          product: '3100000002881',
          finishTime: '2025-11-14 08:15:30',
          progress: 45,
          state: '待机'
        },
        {
          name: '冲压C22冲床',
          ordersLeft: 0,
          orderNo: '1100084952003',
          product: '3100000002882',
          finishTime: '2025-11-12 16:45:22',
          progress: 100,
          state: '停机'
        },
        {
          name: '冲压D15冲床',
          ordersLeft: 2,
          orderNo: '1100084952004',
          product: '3100000002883',
          finishTime: '2025-11-15 12:30:15',
          progress: 60,
          state: '运行'
        },
        {
          name: '冲压C22冲床',
          ordersLeft: 0,
          orderNo: '1100084952003',
          product: '3100000002882',
          finishTime: '2025-11-12 16:45:22',
          progress: 100,
          state: '停机'
        },
        {
          name: '冲压D15冲床',
          ordersLeft: 2,
          orderNo: '1100084952004',
          product: '3100000002883',
          finishTime: '2025-11-15 12:30:15',
          progress: 60,
          state: '运行'
        },
        {
          name: '冲压C22冲床',
          ordersLeft: 0,
          orderNo: '1100084952003',
          product: '3100000002882',
          finishTime: '2025-11-12 16:45:22',
          progress: 100,
          state: '停机'
        },
        {
          name: '冲压D15冲床',
          ordersLeft: 2,
          orderNo: '1100084952004',
          product: '3100000002883',
          finishTime: '2025-11-15 12:30:15',
          progress: 60,
          state: '运行'
        }
      ],
      // 报工记录
      workRecords: [
        {
          orderNo: '1100084952001',
          process: '冲压工序',
          sn: '3100000002880',
          equipment: '冲压A13',
          personnel: '张三',
          time: '10:25:36'
        },
        {
          orderNo: '1100084952002',
          process: '冲压工序',
          sn: '3100000002881',
          equipment: '冲压B07',
          personnel: '李四',
          time: '10:18:22'
        },
        {
          orderNo: '1100084952003',
          process: '冲压工序',
          sn: '3100000002882',
          equipment: '冲压C22',
          personnel: '王五',
          time: '10:05:14'
        },
        {
          orderNo: '1100084952004',
          process: '冲压工序',
          sn: '3100000002883',
          equipment: '冲压D15',
          personnel: '赵六',
          time: '09:52:47'
        },
        {
          orderNo: '1100084952005',
          process: '冲压工序',
          sn: '3100000002884',
          equipment: '冲压A13',
          personnel: '钱七',
          time: '09:40:33'
        },
        {
          orderNo: '1100084952006',
          process: '冲压工序',
          sn: '3100000002885',
          equipment: '冲压B07',
          personnel: '孙八',
          time: '09:28:19'
        },
        {
          orderNo: '1100084952006',
          process: '冲压工序',
          sn: '3100000002885',
          equipment: '冲压B07',
          personnel: '孙八',
          time: '09:28:19'
        },
        {
          orderNo: '1100084952006',
          process: '冲压工序',
          sn: '3100000002885',
          equipment: '冲压B07',
          personnel: '孙八',
          time: '09:28:19'
        },
        {
          orderNo: '1100084952006',
          process: '冲压工序',
          sn: '3100000002885',
          equipment: '冲压B07',
          personnel: '孙八',
          time: '09:28:19'
        },
        {
          orderNo: '1100084952006',
          process: '冲压工序',
          sn: '3100000002885',
          equipment: '冲压B07',
          personnel: '孙八',
          time: '09:28:19'
        },
        {
          orderNo: '1100084952007',
          process: '冲压工序',
          sn: '3100000002886',
          equipment: '冲压C22',
          personnel: '周九',
          time: '09:15:07'
        }
      ],
      // 报工记录配置
      workRecordConfig: {
        header: ['工单', '工序', 'SN', '设备', '人员', '时间'],
        data: [],
        index: true,
        columnWidth: [],
        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
        headerBGC: 'rgba(0, 123, 255, 0.1)',
        oddRowBGC: 'rgba(0, 123, 255, 0.05)',
        evenRowBGC: 'rgba(0, 212, 255, 0.02)',
        headerColor: '#00d4ff',
        rowColor: '#fff',
        headerHeight: 40,
        rowNum: 5,
        waitTime: 2000
      },
      // 图表实例
      charts: {},
      // 防抖定时器
      resizeTimer: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 进入全屏模式
      this.enterFullscreen();

      // 添加键盘事件监听
      document.addEventListener('keydown', this.handleKeydown);

      // 延迟初始化图表，确保DOM完全渲染和容器尺寸确定
      setTimeout(() => {
        this.initCharts();
      }, 100);

      // 初始化报工记录数据
      this.updateWorkRecordConfig();

      // 窗口大小变化时重绘图表
      window.addEventListener('resize', this.handleResize);

      // 模拟实时数据更新
      this.startDataUpdate();
    });
  },
  beforeDestroy() {
    // 清理定时器
    if (this.dataTimer) {
      clearInterval(this.dataTimer);
    }

    if (this.resizeTimer) {
      clearTimeout(this.resizeTimer);
    }

    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.handleResize);

    // 移除键盘事件监听
    document.removeEventListener('keydown', this.handleKeydown);

    // 销毁图表实例
    Object.values(this.charts).forEach(chart => {
      if (chart) {
        chart.dispose();
      }
    });
  },
  methods: {
    // 进入全屏模式
    enterFullscreen() {
      const element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      }
    },

    // 初始化图表
    initCharts() {
      // 1. 每日合格率图表
      this.charts.qualityRate = echarts.init(document.getElementById('quality-rate-chart'));
      const qualityRateOption = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>合格率: {c}%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            lineStyle: {
              color: '#1e90ff'
            }
          },
          axisLabel: {
            color: '#a0c3ff'
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#1e90ff'
            }
          },
          axisLabel: {
            color: '#a0c3ff',
            formatter: '{value}%'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [{
          name: '合格率',
          type: 'bar',
          barWidth: '60%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: '#00d4ff'},
              {offset: 1, color: '#007bff'}
            ])
          },
          data: [85, 92, 88, 95, 90, 87, 93]
        }]
      };
      this.charts.qualityRate.setOption(qualityRateOption);

      // 2. 设备故障TOP5图表
      const faultChartElement = document.getElementById('fault-ranking-chart');
      if (faultChartElement) {
        // 检查容器尺寸
        const rect = faultChartElement.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0) {
          this.charts.fault = echarts.init(faultChartElement);
          const faultOption = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: '{b}: {c}次'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '5%',
              top: '15%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: ['液压系统故障', '电机过热', '传感器异常', '控制系统故障', '机械磨损'],
              axisLine: {
                lineStyle: {
                  color: '#1e90ff'
                }
              },
              axisLabel: {
                color: '#a0c3ff',
                rotate: 30,
                fontSize: 10
              }
            },
            yAxis: {
              type: 'value',
              name: '故障次数',
              nameTextStyle: {
                color: '#a0c3ff'
              },
              axisLine: {
                lineStyle: {
                  color: '#1e90ff'
                }
              },
              axisLabel: {
                color: '#a0c3ff'
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(30, 144, 255, 0.2)'
                }
              }
            },
            series: [{
              name: '故障次数',
              type: 'bar',
              barWidth: '50%',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#ff4757'},
                  {offset: 1, color: '#ffa502'}
                ])
              },
              data: [12, 8, 5, 3, 2]
            }]
          };
          this.charts.fault.setOption(faultOption);

          // 强制重绘以确保图表适应容器
          setTimeout(() => {
            this.charts.fault.resize();
          }, 50);
        } else {
          console.error('故障排名图表容器未找到或尺寸为0');
        }
      }

      // 3. 初始化设备进度仪表盘
      this.initGaugeCharts();
    },

    // 初始化仪表盘图表
    initGaugeCharts() {
      this.equipmentList.forEach((equipment, index) => {
        const chartId = 'gauge-chart-' + index;
        const chartElement = document.getElementById(chartId);

        if (chartElement) {
          const chart = echarts.init(chartElement);
          this.charts[chartId] = chart;

          const gaugeOption = {
            series: [{
              type: 'gauge',
              startAngle: 225,
              endAngle: -45,
              radius: '95%',
              center: ['50%', '50%'],
              progress: {
                show: true,
                width: 20,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {offset: 0, color: '#00d4ff'},
                    {offset: 0.5, color: '#00ffff'},
                    {offset: 1, color: '#00ff88'}
                  ])
                }
              },
              pointer: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [[1, 'rgba(0, 212, 255, 0.1)']]
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                width: '100%',
                height: 40,
                borderRadius: 8,
                offsetCenter: [0, '0%'],
                fontSize: 24,
                fontWeight: 'bold',
                formatter: function (value) {
                  return '{percent|' + value + '%}';
                },
                rich: {
                  percent: {
                    fontSize: 24,
                    fontWeight: 'bold',
                    color: '#00ffff',
                    lineHeight: 30
                  }
                }
              },
              data: [{
                value: equipment.progress
              }]
            }]
          };

          chart.setOption(gaugeOption);
        }
      });
    },
    // 处理窗口大小变化
    handleResize() {
      // 防抖处理
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }

      this.resizeTimer = setTimeout(() => {
        Object.values(this.charts).forEach(chart => {
          if (chart) {
            chart.resize();
          }
        });
      }, 200);
    },
    // 开始数据更新
    startDataUpdate() {
      this.dataTimer = setInterval(() => {
        // 模拟数据更新
        this.updateData();
      }, 5000); // 每5秒更新一次
    },
    // 更新数据
    updateData() {
      // 随机更新工单统计数据
      this.orderStats.total = Math.max(30, Math.min(40, this.orderStats.total + Math.floor(Math.random() * 3) - 1));
      this.orderStats.completionRate = Math.max(80, Math.min(95, this.orderStats.completionRate + Math.floor(Math.random() * 3) - 1));

      // 随机更新安全生产天数
      this.safetyDays = Math.max(360, Math.min(370, this.safetyDays + 1));

      // 添加新的报工记录
      const now = new Date();
      const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
      const orderNos = ['1100084952001', '1100084952002', '1100084952003', '1100084952004', '1100084952005'];
      const sns = ['3100000002880', '3100000002881', '3100000002882', '3100000002883', '3100000002884'];
      const equipment = ['冲压A13', '冲压B07', '冲压C22', '冲压D15'];
      const personnel = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];

      const randomOrderNo = orderNos[Math.floor(Math.random() * orderNos.length)];
      const randomSn = sns[Math.floor(Math.random() * sns.length)];
      const randomEquipment = equipment[Math.floor(Math.random() * equipment.length)];
      const randomPersonnel = personnel[Math.floor(Math.random() * personnel.length)];

      this.workRecords.unshift({
        orderNo: randomOrderNo,
        process: '冲压工序',
        sn: randomSn,
        equipment: randomEquipment,
        personnel: randomPersonnel,
        time: timeStr
      });

      // 保持记录数量不超过10条
      if (this.workRecords.length > 10) {
        this.workRecords.pop();
      }

      // 更新报工记录配置
      this.updateWorkRecordConfig();

      // 更新设备进度和仪表盘
      this.updateGaugeCharts();
    },

    // 更新仪表盘图表
    updateGaugeCharts() {
      this.equipmentList.forEach((equipment, index) => {
        const chartId = 'gauge-chart-' + index;
        const chart = this.charts[chartId];

        if (chart) {
          // 模拟进度变化
          equipment.progress = Math.max(0, Math.min(100, equipment.progress + Math.floor(Math.random() * 5) - 2));

          // 更新图表数据
          chart.setOption({
            series: [{
              data: [{
                value: equipment.progress
              }]
            }]
          });
        }
      });
    },
    // 更新报工记录配置
    updateWorkRecordConfig() {
      this.workRecordConfig.data = this.workRecords.map(record => [
        record.orderNo,
        record.process,
        record.sn,
        record.equipment,
        record.personnel,
        record.time
      ]);
    },
    // 生产操作按钮方法
    issueProduction() {
      alert('生产下发指令已发送');
    },
    pauseProduction() {
      alert('暂停生产指令已发送');
    },
    emergencyStop() {
      if (confirm('确定要执行紧急停止吗？')) {
        alert('紧急停止指令已发送');
      }
    },

    // 进入全屏模式
    enterFullscreen() {
      const element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      }
    },

    // 退出全屏模式
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      }
    },

    // 监听键盘事件
    handleKeydown(event) {
      // ESC键退出全屏
      if (event.key === 'Escape') {
        this.exitFullscreen();
      }
      // F11键切换全屏
      if (event.key === 'F11') {
        event.preventDefault();
        if (document.fullscreenElement) {
          this.exitFullscreen();
        } else {
          this.enterFullscreen();
        }
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #081220 0%, #050a15 100%);
  color: #fff;
  overflow: hidden;
  height: 100vh;
  margin: 0;
  padding: 0;

}

/* 隐藏页面滚动条 */
::-webkit-scrollbar {
  display: none;
}

html {
  overflow: hidden;
}

.dashboard-container {
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: linear-gradient(135deg, #081220 0%, #050a15 100%);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 9999;
}

/* 头部标题样式 */
.dashboard-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin-bottom: 10px;
  position: relative;
}

.dashboard-title {
  font-size: 36px;
  font-weight: bold;
  color: #00d4ff;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
  letter-spacing: 4px;
  position: relative;
  padding: 0 40px;
}

.dashboard-title::before,
.dashboard-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
}

.dashboard-title::before {
  left: -120px;
}

.dashboard-title::after {
  right: -120px;
}

/* 主内容区域 */
.dashboard-content {
  display: flex;
  height: calc(100vh - 70px);
  gap: 15px;
  padding: 0 15px;
  overflow: hidden;
}

/* 左侧面板 */
.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

/* 中间面板 */
.center-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

/* 右侧面板 */
.right-panel {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

/* 面板通用样式 */
.panel {
  background: rgba(16, 36, 66, 0.6);
  border: 1px solid rgba(0, 123, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
}

.panel-header {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: rgba(0, 123, 255, 0.1);
  border-bottom: 1px solid rgba(0, 123, 255, 0.2);
  flex-shrink: 0;
}

.panel-title {
  font-size: 18px;
  color: #00d4ff;
  font-weight: bold;
}

.panel-content {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* 温湿度样式 */
.temp-humidity {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.temp-item,
.humidity-item {
  text-align: center;
  flex: 1;
}

.temp-value,
.humidity-value {
  font-size: 28px;
  color: #00d4ff;
  margin: 10px 0;
}

/* 增强版温湿度样式 */
.temp-humidity-enhanced {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.temp-humidity-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}

.temp-item-enhanced,
.humidity-item-enhanced {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
  /*background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);*/
  border-radius: 12px;
  padding: 20px 15px;
  margin: 0 10px;
  transition: all 0.3s ease;
}

.temp-item-enhanced:hover,
.humidity-item-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.2);
  border-color: rgba(0, 212, 255, 0.5);
}

.temp-icon-wrapper,
.humidity-icon-wrapper {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 123, 255, 0.1) 100%);
  border: 2px solid rgba(0, 212, 255, 0.4);
  margin-bottom: 5px;
  position: relative;
  overflow: hidden;
}

.temp-icon-wrapper::before,
.humidity-icon-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(0, 212, 255, 0.3), transparent);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.temp-icon,
.humidity-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
  position: relative;
  z-index: 1;
}

.temp-data,
.humidity-data {
  text-align: center;
}

.temp-value,
.humidity-value {
  font-size: 32px;
  font-weight: bold;
  color: #00d4ff;
  margin-bottom: 8px;
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
  letter-spacing: 2px;
}

.temp-label,
.humidity-label {
  font-size: 16px;
  color: #a0c3ff;
  font-weight: 500;
  letter-spacing: 1px;
}

/* 图表容器 */
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
}

/* 确保面板内容有明确高度 */
.panel-content {
  height: calc(100% - 40px);
  position: relative;
}

/* 工单生产统计样式 */
.production-stats {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 顶部统计数据样式 */
.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  flex-shrink: 0;
}

.stats-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 14px;
  color: #a0c3ff;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 28px;
  color: #00d4ff;
  font-weight: bold;
}

.order-status-list {
  display: flex;
  gap: 20px;
}

.order-status-item {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.status-issue {
  background: #00d4ff;
}

.status-production {
  background: #00ff88;
}

.status-interrupt {
  background: #ffa502;
}

.status-pause {
  background: #ff4757;
}

.status-none {
  background: #666;
}

.status-text {
  font-size: 12px;
  color: #a0c3ff;
}

.order-status-value {
  font-size: 24px;
  font-weight: bold;
  color: #00d4ff;
  margin: 5px 0;
}

.order-status-label {
  font-size: 12px;
  color: #a0c3ff;
}

.stats-right {
  display: flex;
  align-items: center;
}

.equipment-status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.equipment-status-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.status-running {
  background: #00ff88;
}

.status-standby {
  background: #ffa502;
}

.status-stopped {
  background: #ff4757;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-name {
  font-size: 14px;
  color: #a0c3ff;
}

.status-count {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.equipment-list {
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 5px;
  min-height: 0;

  /* 自定义滚动条样式 */
}

.equipment-list::-webkit-scrollbar {
  width: 1px;
}

.equipment-list::-webkit-scrollbar-track {
  background: rgba(0, 212, 255, 0.1);
  border-radius: 2px;
}

.equipment-list::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.3);
  border-radius: 2px;
}

.equipment-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.5);
}

.equipment-item {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.08) 0%, rgba(0, 212, 255, 0.05) 50%, rgba(0, 123, 255, 0.08) 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 18px;
  height: 220px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.15),
  inset 0 1px 0 rgba(255, 255, 255, 0.1),
  inset 0 -1px 0 rgba(0, 212, 255, 0.2);
}

.equipment-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

.equipment-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}


.equipment-item:hover::after {
  opacity: 1;
}

.equipment-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.equipment-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  padding-bottom: 12px;
  position: relative;
}

.equipment-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
}

.equipment-name {
  font-size: 18px;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

.equipment-state {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 123, 255, 0.1) 100%);
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2),
  inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.equipment-state:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3),
  inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.state-label {
  color: #ffffff;
  font-weight: 500;
}

.state-value {
  font-weight: 700;
  text-shadow: 0 0 5px currentColor;
  transition: all 0.3s ease;
}

.state-value[data-state="运行"] {
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

.state-value[data-state="待机"] {
  color: #ffa502;
  text-shadow: 0 0 8px rgba(255, 165, 2, 0.6);
}

.state-value[data-state="停机"] {
  color: #ff4757;
  text-shadow: 0 0 8px rgba(255, 71, 87, 0.6);
}

@keyframes shimmer {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

.equipment-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  position: relative;
}

.equipment-info {
  flex: 1;
  padding-right: 15px;
}

.equipment-details {
  font-size: 12px;
  color: #b8d4ff;
  line-height: 1.8;
  /*background: rgba(0, 212, 255, 0.05);*/
  /*border-radius: 8px;*/
  padding: 12px;
  /*border: 1px solid rgba(0, 212, 255, 0.2);*/
  position: relative;
  overflow: hidden;
}

.equipment-details::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  /*background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);*/
}

.equipment-details div {
  margin-bottom: 6px;
  position: relative;
  padding-left: 15px;
  transition: all 0.3s ease;
}

.equipment-details div::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #00d4ff;
  font-size: 10px;
  transition: all 0.3s ease;
}

.equipment-details div:hover {
  color: #ffffff;
  padding-left: 20px;
}

.equipment-details div:hover::before {
  color: #00ffff;
  left: 5px;
}

.equipment-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  position: relative;
}

.gauge-chart {
  width: 120px;
  height: 120px;
  position: relative;
}

/* 右侧面板样式 */
.safety-days {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.safety-days .dv-digital-flop {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.days-label {
  font-size: 16px;
  color: #a0c3ff;
  margin-top: 10px;
}

/* 故障排名样式 */
.fault-ranking {
  height: 100%;
}

.ranking-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px;
  background: rgba(255, 71, 87, 0.1);
  border-radius: 4px;
}

.ranking-index {
  width: 24px;
  height: 24px;
  background: #ff4757;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 12px;
}

.ranking-name {
  flex: 1;
  font-size: 14px;
}

.ranking-count {
  font-size: 14px;
  color: #ffa502;
}


/* 操作按钮样式 */
.operation-buttons {
  display: flex;
  justify-content: space-around;
  height: 100%;
  align-items: center;
}

.operation-btn {
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.operation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.issue-btn {
  background: #00d4ff;
  color: #0a1122;
}

.pause-btn {
  background: #00ff88;
  color: #0a1122;
}

.stop-btn {
  background: #ffa502;
  color: #0a1122;
}

/* 响应式调整 */
@media (max-width: 1600px) {
  .dashboard-content {
    gap: 15px;
  }

  .order-value {
    font-size: 28px;
  }

  .days-value {
    font-size: 36px;
  }
}

.colorC {
  color: #FFC143;
}
</style>
